<template>
  <!-- 项目信息组件 -->
  <div class="vy-cmp-cs-project">
    <div class="vy-cmp-common-title">
      <span class="vy-cmp-common-title-left">项目信息</span>
    </div>
    <div class="vy-cmp-cs-project-container">
      <div class="vy-cmp-cs-project-form">
        <a-form>
          <a-form-item
            label="项目启停"
            :colon="false"
            v-bind="formItemLayout"
            extra="关闭后，项目内的所有消息记录、所有应用的数据都会被暂停，成员将无法进入，请谨慎操作"
          >
            <template v-if="formData.releaseState == '1'">
              <a-button @click="click_set_switch(0)">关闭项目</a-button>
            </template>
            <template v-if="formData.releaseState == '0'">
              <a-button @click="click_set_switch(1)">开启项目</a-button>
            </template>
          </a-form-item>
          <a-form-item label="项目介绍" :colon="false" v-bind="formItemLayout">
            <!-- 富文本编辑器 -->
            <ckeditor
              :editor="editor"
              v-model="formData.introduce"
              :config="editorConfig"
            ></ckeditor>
          </a-form-item>
          <!-- <a-form-item label="多语言支持" :colon="false" v-bind="formItemLayout"
            extra="开启多语言支持时，项目内文字均支持配置简体中文和英文 ">
            <a-checkbox>开启</a-checkbox>
          </a-form-item> -->
          <a-form-item label="创建时间" :colon="false" v-bind="formItemLayout">
            {{ formData.createTime | formatTime("YMD") }}
          </a-form-item>
          <a-form-item label="项目ID" :colon="false" v-bind="formItemLayout">
            {{ formData.itemNumber }}
          </a-form-item>

          <a-form-item>
            <a-button type="primary" @click="click_save_info"
              >保存更改</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
//引入CKedite
import CKEditor from "@ckeditor/ckeditor5-vue2";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import zh from "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js";
import upload from "../../../../../public/upload";
import { formatTime } from "../../../../../util/common.js";

export default {
  name: "vy-cmp-cs-project",
  data() {
    return {
      formItemLayout: {
        labelCol: {
          span: 3,
        },
        wrapperCol: {
          span: 21,
        },
      },
      //ck设置
      editor: ClassicEditor,
      editorConfig: {
        language: { ui: "zh-cn", content: "zh-cn" },
        axios: this.$axios,
        extraPlugins: [upload.MyCustomUploadAdapterPlugin],
      },
      projectId: null, // 项目id
      // 表单字段数据
      formData: {
        releaseState: 0, // 项目启停, 0: 关闭, 1: 开启
        introduce: "", // 项目介绍
        createTime: "", // 创建时间
        itemNumber: "", // 项目编号
      },
    };
  },
  filters: {
    formatTime,
  },
  components: {
    ckeditor: CKEditor.component,
  },
  created() {
    this.projectId = this.$route.query.projectId;
  },
  mounted() {
    this.$nextTick(() => {
      this.queryInfo();
    });
  },
  methods: {
    // 查询项目信息
    queryInfo() {
      let params = {
        projectId: this.projectId,
      };
      this.$axios
        .get("/projectSetting/getProjectSetting", { params })
        .then((res) => {
          this.formData.releaseState = res.releaseState;
          this.formData.introduce = res.introduce || "";
          this.formData.createTime = res.createTime || "";
          this.formData.itemNumber = res.itemNumber || "";
        });
    },
    // 更新项目设置
    saveInfo() {
      let params = Object.assign(
        {
          id: this.projectId,
        },
        this.formData
      );
      this.$axios.post("/projectSetting/updateSetting", params).then((res) => {
        if (res.success) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 项目启停点击事件
    click_set_switch(state) {
      this.formData.releaseState = state;
    },
    // 保存更改
    click_save_info() {
      this.saveInfo();
    },
  },
};
</script>

<style type="text/css" lang="scss">
.vy-cmp-cs-project {
  width: 100%;
  height: 100%;
  background: #ffffff;
  .ant-form-item {
    border-bottom: 1px solid rgba(235, 235, 236, 1);
    padding: 12px 0;
    margin-bottom: 0;
    &:nth-last-child(1) {
      border: none;
      margin-bottom: 0;
    }
    .ant-form-item-label {
      text-align: left;
    }
    .ant-form-item-control .edui-default {
      line-height: 1.5;
    }
    .ck-editor__editable {
      height: 250px;
    }
  }
}
</style>
